import { Component } from "react";

export default class EmailList extends Component {

    constructor(props) {
        super(props);
        this.timer = null;
        this.state = {
            emails: []
        };
    }

    componentDidMount() {
        this.timer = setTimeout(()=> {
            this.setState({
                emails: [
                    "100th@163.com",
                    "101th@163.com",
                    "102th@163.com",
                    "103th@163.com",
                    "104th@163.com",
                    "105th@163.com",
                    "106th@163.com",
                    "107th@163.com"
                ]
            });
        }, 1000);
    }

    componentWillUnmount() {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    }

    render() {
        return (
            <div>
                <h3>{this.props.title}</h3>
                <ul>
                    {
                        this.state.emails.map((item, index) => <li key={index}>{item}</li>)
                    }
                </ul>
            </div>
        )
    }
}